define(['knockout', 'dataservice'], function (ko, ds) {
	return function () {

		// The question displayed within this component.
		let currentQuestion = ko.observable({});
		// The user-provided annotation.
		let annotationInput = ko.observable("");

		// Updating the selected question with the value from localStorage.
		// TODO: Do we really need to make use of localStorage? What are the alternatives?.
		let selectedQuestionUrl = localStorage.getItem("selectedQuestionUrl");

		// Initialization of the current question with data from the backend.
		ds.getQuestionDetails(function (data) {
			currentQuestion(data);
		}, selectedQuestionUrl);

		// Mark question along with saving the annotation.
		let markQuestionClick = function () {
			let markQuestionData = {
				questionId: currentQuestion().id,
				annotation: annotationInput(),
			}

			// Send the marked question to the backend.
			ds.postMarkedQuestion(function () {}, markQuestionData);
		}

		// Expose what the UI needs.
		return {
			currentQuestion,
			annotationInput,
			markQuestionClick,
		}
	}
});